<template>
	<view>
		<view class="header-bg">
			<view class="user-info" v-if="infos">
				<image :src="infos.avatar" mode=""></image>
				<view class="user-name">
					<text class="user-nickname">{{infos.nickName}}</text>
					<text class="user-phone">{{infos.phonenumber}}</text>
				</view>
			</view>
			<view v-else>
				<!-- <button open-type="chooseAvatar" class="avatar-btn" @chooseavatar="onChooseAvatar" plain> -->
				<view class="user-info" @click="gotoLogin">
					<image
						src="https://kdb-zsff.oss-cn-beijing.aliyuncs.com/2024/11/22/ba1efda3-a36f-4795-9c90-41e71781ac11.png"
						mode=""></image>
					<view class="user-name">
						<text>请登录~</text>
					</view>

				</view>
				<!-- </button> -->
			</view>

			<view class="user-balance-info">
				<view class="user-balance" @click="go('/subPackages/mine/balance/balance')">
					<view class="item">
						<text class="title">余额(元)</text>
						<text class="value">{{infos.money}}</text>
					</view>
				</view>
				<view class="user-vip" @click="go('/subPackages/mine/vip/vip')">
					<view class="item">
						<text class="title">会员</text>
						<view class="vip-level">
							<image class="level" src="/static/mine/level_1.png" v-if="infos.level == 1"></image>
							<image class="level" src="/static/mine/level_2.png" v-else-if="infos.level == 2"></image>
							<image class="level" src="/static/mine/level_3.png" v-else-if="infos.level == 3"></image>
							<image class="level" src="/static/mine/level_0.png" v-else></image>
						</view>
					</view>
				</view>
				<view class="user-integral" @click="go('/subPackages/mine/integral/integral')">
					<view class="item">
						<text class="title">积分</text>
						<text class="value">{{infos.score}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="order-header">
				<text class="header-text">全部订单</text>
				<view class="show-all-order" @click="myOrder(0)">
					<text>查看全部订单</text>
					<image src="/static/mine/mine-right.png" mode=""></image>
				</view>
			</view>
			<view class="order-state">

				<view class="order-item" v-for="item,index in orderList" :key="index" @click="myOrder(index+1)">
					<image :src="item.img" mode=""></image>
					<text class="state-name">{{item.name}}</text>
					<view class="badge-container">
						<u-badge max="99" :value="item.count"></u-badge>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list-item" v-for="item,index in menuList" :key="index" v-if="item.isShow">
				<view class="list-content" @click="handleItem(item)">
					<view class="item-left">
						<image :src="item.img" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					<view class="item-right">
						<image src="/static/mine/mine-right.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/App.vue'
	export default {
		data() {
			return {
				infos: null,
				orderList: [{
						img: "/static/mine/mine-obligation.png",
						name: "待付款",
						count: 0,
					},
					{
						img: "/static/mine/mine-overhang.png",
						name: "待发货",
						count: 0,
					},
					{
						img: "/static/mine/mine-wait-for-receiving.png",
						name: "待收货",
						count: 0,
					},
					{
						img: "/static/mine/mine-do-justice-to.png",
						name: "待评价",
						count: 0,
					},
					{
						img: "/static/mine/mine-refund.png",
						name: "退款",
						count: 0,
					},
				],
				menuList: [{
						img: "/static/mine/mine-list-address.png",
						name: "收货地址",
						url:'/subPackages/cart/addressList/addressList',
						isShow: true,
					},
					{
						img: "/static/mine/mine-list-card-center.png",
						name: "礼品卡中心",
						url:'/subPackages/mine/sendGift/sendGift',
						isShow: true,
					},
					{
						img: "/static/mine/mine-list-vip-card.png",
						name: "我的会员卡",
						url:'/subPackages/mine/vip/vip',
						isShow: true,
					},
					{
						img: "/static/mine/mine-list-integral.png",
						name: "我的积分",
						url:'/subPackages/mine/integral/integral',
						isShow: true,
					},
					{
						img: "/static/mine/mine-list-gift-center.png",
						name: "我的送礼中心",
						url:'/subPackages/mine/giftCard/giftCard',
						isShow: true,
					},
					{
						img: "/static/mine/mine-list-balance.png",
						name: "我的余额",
						url:'/subPackages/mine/balance/balance',
						isShow: true,
					},
					{
						img: "/static/mine/mine-list-server.png",
						name: "我的客服",
						url:'/subPackages/mine/service/service',
						isShow: true,
					},
					{
						img: "/static/mine/mine-list-tuiguang.png",
						name: "我的推广",
						url:'/subPackages/mine/myDistributor/myDistributor',
						isShow: false,
					},
					{
						img: "/static/mine/mine-list-about-me.png",
						name: "关于我们",
						url:'/subPackages/mine/about/about',
						isShow: true,
					},
				]
			}
		},
		onShow() {
			const token = uni.getStorageSync("token")
			if (token) {
				this.reqeustUserInfo()
			}
		},
		onLoad() {
			const token = uni.getStorageSync("token")
			if (!token) {
				// this.go('/subPackages/mine/login/login')
				// return
			} else {
				this.reqeustUserInfo()
			}
		},
		methods: {
			//用户头像
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				console.log("avatarUrl -------- ", avatarUrl)
				let that = this
				uni.showLoading({
					title: '登录中...'
				})
				that.uploadImage(avatarUrl)

			},
			//头像图片持久化
			uploadImage(url1) {
				//uni.uploadFile将微信返回的临时地址转成文件流传输给后端，从而上传服务器，拿到永久地址
				let that = this
				uni.uploadFile({
					url: `${App.hostname}/open/api/upload`,
					filePath: url1,
					name: 'file',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					formData: {},
					success: (uploadFileRes) => {
						if (uploadFileRes.statusCode == 200) {
							const data = JSON.parse(uploadFileRes.data);
							if (data.code == 200) {
								console.log("uploadFileRes data-------- ", data)
								console.log("uploadFileRes data data11-------- ", data.data)
								uni.login({
									provider: 'weixin', //使用微信登录
									success: function(loginRes) {
										console.log("loginRes -------- ", loginRes)
										console.log("data.url data-------- ", data.data.url)
										that.https({
											method: "POST",
											url: '/xcxLogin',
											data: {
												code: loginRes.code,
												avatar: data.data.url
											},
											success: res => {
												console.log("res -------- ", res)
												if (res.code == 200) {
													that.toast('登录成功')
													uni.setStorageSync('token', res
														.data
														.token)
													that.reqeustUserInfo()

												}
											},
											fail: err => {},
											complete: com => {}
										})
									}
								})
							}
						}
					}
				});
			},
			//用户信息
			reqeustUserInfo() {
				let that = this
				that.https({
					method: "GET",
					url: '/getInfo',
					success: res => {
						console.log("res serInfo-------- ", res)
						if (res.code == 200) {
							that.infos = res.data.user
							uni.setStorageSync('userInfo', res.data.user)
							if (that.infos) {
								that.requestorder1(that.infos.userId)
								that.requestorder2(that.infos.userId)
								that.requestorder3(that.infos.userId)
								that.requestorder4(that.infos.userId)
								that.requestorder5(that.infos.userId)
								that.requestdistributor(that.infos.userId)
							}
						}
					},
					fail: err => {

					},
					complete: com => {}
				})
			},
			//请求待付款数量
			requestorder1(userId) {
				this.requestOrder(1, userId)
			},
			//请求待发货数量
			requestorder2(userId) {
				this.requestOrder(2, userId)
			},
			requestorder3(userId) {
				this.requestOrder(3, userId)
			},
			requestorder4(userId) {
				let that = this
				that.https({
					method: "GET",
					url: '/project/order/list',
					data: {
						commentStatus: 1,
						orderStatus: 4,
						userId: userId
					},
					success: res => {
						console.log("res -------- ", res)
						if (res.code == 200) {
							that.orderList[3].count = res.total
						}
					},
					fail: err => {

					},
					complete: com => {}
				})
			},
			requestorder5(userId) {
				this.requestOrder(5, userId)
			},
			requestOrder(status, userId) {
				let that = this
				that.https({
					method: "GET",
					url: '/project/order/list',
					data: {
						orderStatus: status,
						userId: userId
					},
					success: res => {
						console.log("res -------- ", res)
						if (res.code == 200) {
							if (status === 1) {
								that.orderList[0].count = res.total
							} else if (status === 2) {
								that.orderList[1].count = res.total
							} else if (status === 3) {
								that.orderList[2].count = res.total
							} else if (status === 5) {
								that.orderList[4].count = res.total
							}
						}
					},
					fail: err => {

					},
					complete: com => {}
				})
			},
			myOrder(index) {
				let type = index
				if (index === 4 || index === 5) {
					type = index + 1
				}
				this.go(`/subPackages/mine/myOrder/myOrder?status=${type}`)
			},
			handleItem(item) {
				this.go(item.url)
			},
			//获取用户是否是分销员
			requestdistributor(userId) {
				let that = this
				that.https({
					method: "GET",
					url: '/project/distributor/list',
					data: {
						userId: userId
					},
					success: res => {
						console.log("res requestdistributor-------- ", res)
						if (res.code == 200) {
							if(res.rows && res.rows.length > 0){
								that.menuList[7].isShow = true
								console.log("menuList ----- ",that.menuList)
							}
						}
					},
					fail: err => {},
					complete: com => {}
				})
			},
			gotoLogin() {
				this.go('/subPackages/mine/login/login')
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F9;
		// padding-bottom: 60rpx;
		box-sizing: border-box;
	}


	.header-bg {
		width: 100%;
		height: 400rpx;
		background: linear-gradient(180deg, #D7FFF2 0%, rgba(255, 255, 255, 0) 100%);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;

		.avatar-btn {
			margin: 0;
			padding: 0;
			border: none !important;
			box-shadow: none;
			background-color: transparent;
		}

		.user-info {
			display: flex;
			align-items: center;
			padding: 28rpx 30rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

			.user-name {
				display: flex;
				flex-direction: column;
				margin-left: 32rpx;
				color: #333333;
				font-size: 36rpx;

				.user-nickname {
					max-width: 200rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: rgba(51, 51, 51, 0.9);
					text-align: left;
				}

				.user-phone {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #979797;
					line-height: 48rpx;
					text-align: left;
				}
			}
		}

		.user-balance-info {
			width: calc(100% - 60rpx);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;

			.user-balance {
				width: 220rpx;
				height: 128rpx;
				background: url("/static/mine/mine-balance.png");
				background-size: 100% 100%;

				.item {
					padding: 24rpx;
					display: flex;
					flex-direction: column;

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						text-align: left;
						margin-bottom: 12rpx;
					}

					.value {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #009966;
						text-align: left;
					}
				}

			}

			.user-vip {
				width: 220rpx;
				height: 128rpx;
				background: url("/static/mine/mine-vip.png");
				background-size: 100% 100%;

				.item {
					padding: 24rpx;
					display: flex;
					flex-direction: column;

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						text-align: left;
						margin-bottom: 12rpx;
					}

					.vip-level {
						display: flex;
						width: max-content;
						max-width: 100%;
						align-items: center;

						.level {
							width: 96rpx;
							height: 36rpx;
						}


					}
				}

			}

			.user-integral {
				width: 220rpx;
				height: 128rpx;
				background: url("/static/mine/mine-integral.png");
				background-size: 100% 100%;

				.item {
					padding: 24rpx;
					display: flex;
					flex-direction: column;

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						text-align: left;
						margin-bottom: 12rpx;
					}

					.value {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #00AAFF;
						text-align: left;
					}
				}


			}

		}
	}

	.order {
		display: flex;
		flex-direction: column;
		margin: 24rpx 30rpx;
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 12rpx;

		.order-header {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.header-text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 42rpx;
				text-align: left;
			}

			.show-all-order {
				display: flex;
				align-items: center;

				text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 42rpx;
					text-align: right;
				}

				image {
					margin-left: 4rpx;
					width: 16rpx;
					height: 26rpx;
				}
			}
		}

		.order-state {
			margin: 36rpx 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.order-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;

				.state-name {
					margin-top: 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					text-align: center;
				}

				image {
					width: 48rpx;
					height: 48rpx;
				}

				.badge-container {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					z-index: 10;
				}

			}

		}
	}

	.list {
		display: flex;
		flex-direction: column;
		margin: 24rpx 30rpx;
		background: #FFFFFF;
		border-radius: 12rpx;

		.list-item {
			padding: 24rpx 30rpx;
			display: flex;
			flex-direction: column;
			border-bottom: 1rpx solid #EEEEEE;

			.list-content {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item-left {
					display: flex;
					align-items: center;

					image {
						margin-right: 24rpx;
						width: 48rpx;
						height: 48rpx;
					}

					text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						text-align: left;
					}
				}

				.item-right {
					image {
						width: 16rpx;
						height: 26rpx;
					}
				}
			}

		}
	}
</style>